<script setup lang='ts'>
import { reactive, ref, watch } from 'vue';


const count = ref(0)
const name = ref('你好宝贝')
type IPerson = {name:string, info:{address:string,phone:string}}
const person = reactive<IPerson>({
    name:'张三',
    info:{
        address:'北京昌平',
        phone:'010-123456'
    }
})
// 侦听器单个的用法
// watch监听一个响应式数据
// watch(count,(newValue,oldValue)=>{
//     console.log('新值 ' + newValue + " " + '旧值 ' +  oldValue)
// })
// watch监听多个响应式数据-newValue和oldValue是数组，顺序按照传入顺序排列
watch([count, name], (newValue, oldValue) => {
    console.log('新值 ' + newValue + " " + '旧值 ' + oldValue)
})

// Watch监听响应式对象中属性的变化
// watch(() => person.name, (newValue, oldValue) => {
//     console.log("新值" +newValue, "旧值" +oldValue)
// })
watch(person, (newValue, oldValue) => {
    console.log("新值" +newValue, "旧值" +oldValue)
}, {
    deep: true, // 开启深度监听
    immediate: true // 初始化时执行一次
})
</script>

<template>
    <h1>Watch的最简单用法</h1>
    <button @click="count--">-</button>
    <span style="margin: 0 10px;">{{ count }}</span>
    <button @click="count++">+</button><br>
    <input type="text" v-model="name">
    <h1>Watch监听属性的变化</h1>
    <ul>
        <li v-for="(value,index,key) in person " :key='index'>{{ value }}-{{ key }}</li>
    </ul>
    <button @click="person.name = '李四'">修改名字</button>
    <button @click="person.info.address = '深圳南山'">修改信息</button>

</template>

<style scoped></style>